<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<script src="../fast/dom/shadow/resources/shadow-dom.js"></script>
<style>
div {
    background-color: white;
}

div#shadow-host:focus {
    background-color: green;
}
</style>
<body>
<div id="sandbox"></div>
</body>
<script>
function buildShadowComposedTree(delegatesFocus1, delegatesFocus2) {
    var sandbox = document.querySelector('#sandbox');
    sandbox.innerHTML = '';
    sandbox.appendChild(
        createDOM('div', {},
            createDOM('input', {'id': 'outer-input'}),
            createDOM('div', {'id': 'shadow-host'},
                attachShadow(
                    {'mode': 'open', 'delegatesFocus': delegatesFocus1},
                    createDOM('style', {},
                        document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')),
                    createDOM('div', {'id': 'inner-div'},
                        document.createTextNode('Blink')),
                    createDOM('input', {'id': 'inner-input'}),
                    createDOM('div', {'id': 'inner-shadow-host'},
                        attachShadow(
                            {'mode': 'open', 'delegatesFocus': delegatesFocus2},
                            createDOM('div', {'id': 'inner-div2'},
                                document.createTextNode('Blink')),
                            createDOM('input', {'id': 'inner-input2'})))))));
}

function testShadowComposedTree() {
    debug('testing shadow composed tree');

    debug('(1/4) both shadow hosts\' delegateFocus are false');
    buildShadowComposedTree(false, false);

    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');

    var host = getNodeInComposedTree('shadow-host');
    var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
    var input = getNodeInComposedTree('shadow-host/inner-input');
    var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-input2');
    var outerInput = document.querySelector('#outer-input');

    input.focus()
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    input2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    host.focus();  // this isn't focusable.
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    innerHost.focus();  // this isn't focusable.
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');


    debug('(2/4) top-level shadow host\'s delegateFocus is true');
    buildShadowComposedTree(true, false);

    var host = getNodeInComposedTree('shadow-host');
    var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
    var input = getNodeInComposedTree('shadow-host/inner-input');
    var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-input2');
    var outerInput = document.querySelector('#outer-input');

    input.focus()
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    input2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    host.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    innerHost.focus();  // this isn't focusable.
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');


    debug('(3/4) lower-level shadow host\'s delegateFocus is true');
    buildShadowComposedTree(false, true);

    var host = getNodeInComposedTree('shadow-host');
    var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
    var input = getNodeInComposedTree('shadow-host/inner-input');
    var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-input2');
    var outerInput = document.querySelector('#outer-input');

    input.focus()
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    input2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    host.focus();  // this isn't focusable.
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    innerHost.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');


    debug('(4/4) both shadow hosts\' delegateFocus are true');
    buildShadowComposedTree(true, true);

    var host = getNodeInComposedTree('shadow-host');
    var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
    var input = getNodeInComposedTree('shadow-host/inner-input');
    var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-input2');
    var outerInput = document.querySelector('#outer-input');

    input.focus()
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    input2.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
    outerInput.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    host.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)');
    innerHost.focus();
    backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
    backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
}

testShadowComposedTree();
</script>
